<template>
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-input
          style="width: 15%"
          v-model="searchList.kw"
          placeholder="联系人/企业/电话"
          size="mini"
        ></el-input>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="btnSearch"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
    </div>
    <div class="ba_main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="联系人" name="contacts"></el-tab-pane>
        <el-tab-pane label="企业" name="enterprise"></el-tab-pane>
      </el-tabs>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        height="250"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <div v-if="activeName == 'contacts'">
          <!-- 联系人数据 -->
          <el-table-column label="联系人名称" width="200" fixed="left">
            <template slot-scope="scope">
              <span :title="scope.row.name">{{
                scope.row.name !== "" ? scope.row.name : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系人别名" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.alias">{{
                scope.row.alias !== "" ? scope.row.alias : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话号码" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.phone">{{
                scope.row.phone !== "" ? scope.row.phone : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="企业名称" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.customer_name">{{
                scope.row.customer_name !== "" ? scope.row.customer_name : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="来源" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.source_title">{{
                scope.row.source_title !== "" ? scope.row.source_title : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="地址" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.area">{{
                scope.row.area !== "" ? scope.row.area : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="生日" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.birthday">{{
                scope.row.birthday !== "" ? scope.row.birthday : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="email" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.email">{{
                scope.row.email !== "" ? scope.row.email : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.sex">{{
                scope.row.sex !== "" ? scope.row.sex : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标签" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.tag_name">{{
                scope.row.tag_name !== "" ? scope.row.tag_name : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="身份证" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.id_card">{{
                scope.row.id_card !== "" ? scope.row.id_card : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="微信" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.wx">{{
                scope.row.wx !== "" ? scope.row.wx : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.remark">{{
                scope.row.remark !== "" ? scope.row.remark : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="删除原因" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.del_remark">{{
                scope.row.del_remark !== "" ? scope.row.del_remark : "--"
              }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="address" label="跟进人" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="date" label="删除人"> </el-table-column>
        <el-table-column prop="date" label="删除原因"> </el-table-column>
        <el-table-column prop="name" label="删除时间"> </el-table-column> -->
          <el-table-column label="创建人" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.create_user">{{
                scope.row.create_user !== "" ? scope.row.create_user : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.add_time">{{
                scope.row.add_time !== "" ? scope.row.add_time : "--"
              }}</span>
            </template>
          </el-table-column>
        </div>
        <div v-else>
          <!-- 企业数据 -->
          <el-table-column label="企业名称" width="200" fixed="left">
            <template slot-scope="scope">
              <span :title="scope.row.name">{{
                scope.row.name !== "" ? scope.row.name : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话号码" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.phone">{{
                scope.row.phone !== "" ? scope.row.phone : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="企业网站" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.web_site">{{
                scope.row.web_site !== "" ? scope.row.web_site : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="email" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.email">{{
                scope.row.email !== "" ? scope.row.email : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.level">{{
                scope.row.level !== "" ? scope.row.level : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="地址" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.area">{{
                scope.row.area !== "" ? scope.row.area : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="企业规模" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.scale">{{
                scope.row.scale !== "" ? scope.row.scale : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.remark">{{
                scope.row.remark !== "" ? scope.row.remark : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="删除原因" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.del_remark">{{
                scope.row.del_remark !== "" ? scope.row.del_remark : "--"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="200">
            <template slot-scope="scope">
              <span :title="scope.row.add_time">{{
                scope.row.add_time !== "" ? scope.row.add_time : "--"
              }}</span>
            </template>
          </el-table-column>
        </div>
      </el-table>
      <div class="footer">
        <span style="margin-right: 10px">共{{ datanumber }}条</span>
        <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
        <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-left operable"
            :class="searchList.page == 1 ? 'pageOff' : 'pageOn'"
            @click="prevPage"
          ></i>
        </span>
        <div style="display: inline; margin: 0 10px">
          <el-input
            :title="searchList.page"
            style="width: 60px"
            v-model="searchList.page"
            @change="sizechange()"
            size="mini"
          ></el-input>
          <span style="margin: 0 5px 0 15px">/</span>
          <span>{{ pagenumber == 0 ? "1" : pagenumber }}</span>
        </div>
        <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
          <i
            class="el-icon-arrow-right operable"
            :class="seenumber > datanumber ? 'pageOff' : 'pageOn'"
            @click="nextPage"
          ></i>
        </span>
        <span style="margin-left: 10px">每页</span>
        <el-select
          style="width: 70px"
          v-model="searchList.size"
          @change="sizechange()"
          placeholder="请选择"
          size="mini"
        >
          <el-option
            v-for="item in sizennList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
        条
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 搜索条件
      sizennList: [{ value: 20 }, { value: 50 }, { value: 100 }],
      searchList: {
        page: 1,
        size: "20",
        kw: "",
      },
      datanumber: "0",
      seenumber: "0",
      pagenumber: "0",
      activeName: "contacts",
      tableData: [],
    };
  },
  created() {
    this.loading = true;
    this.getData();
  },
  methods: {
    // 获取列表数据
    getData() {
      let that = this;
      if (this.activeName == "contacts") {
        // 联系人回收站数据
        this.$cmsapi.recContactsList(that.searchList).then(
          (res) => {
            if (res.code == 0) {
              for (let i = 0; i < res.data.length; i++) {
                for (const key in res.data[i]) {
                  if (!res.data[i][key] && res.data[i][key] !== 0) {
                    res.data[i][key] = "";
                  }
                }
              }
              that.seenumber = that.searchList.size * that.searchList.page;
              that.datanumber = res.count;
              that.pagenumber = Math.ceil(res.count / that.searchList.size);
              that.tableData = res.data;
            } else {
              that.$message.error(res.msg);
            }
            that.loading = false;
          },
          (err) => {
            console.log(err);
            that.loading = false;
          }
        );
      } else {
        // 企业回收站数据
        this.$cmsapi.recCustomerList(that.searchList).then(
          (res) => {
            if (res.code == 0) {
              for (let i = 0; i < res.data.length; i++) {
                for (const key in res.data[i]) {
                  if (!res.data[i][key] && res.data[i][key] !== 0) {
                    res.data[i][key] = "";
                  }
                }
              }
              that.seenumber = that.searchList.size * that.searchList.page;
              that.datanumber = res.count;
              that.pagenumber = Math.ceil(res.count / that.searchList.size);
              that.tableData = res.data;
            } else {
              that.$message.error(res.msg);
            }
            that.loading = false;
          },
          (err) => {
            console.log(err);
            that.loading = false;
          }
        );
      }
    },
    // 最大条数变化
    sizechange() {
      this.loading = true;
      this.getData();
    },
    //上一页
    prevPage() {
      this.loading = true;
      this.searchList.page -= 1;
      this.getData();
    }, // 下一页
    nextPage() {
      this.loading = true;
      this.searchList.page += 1;
      this.getData();
    },
    // 搜索
    btnSearch() {
      this.loading = true;
      this.getData();
    },
    // 条件重置
    btnRefresh() {
      this.loading = true;
      this.searchList = this.$options.data().searchList;
      this.getData();
    },
    handleClick(tab, event) {
      this.loading = true;
      this.getData();
    },
    delData() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
</style>